<template>
  <div class="flex-column">
    <div class="flex justify-between flex-wrap flex-row-reverse">
      <div class="text-right mb-10 flex justify-end flex-1">
        <!-- 区域选择 -->
        <region-cascader
          style="width: 300px"
          class="mr-10"
          :multiple="true"
          @change="regionChange"
        />
        <el-input
          v-model.trim="queryData.keyword"
          style="width: 200px"
          maxlength="32"
          clearable
          :placeholder="$t('DEVICE_NAME') + '/' + $t('DEVICE_CODE')"
          @keyup.enter.native="$debounce(search)"
        />
        <el-button type="primary" class="ml-10" @click="$debounce(search)">{{
          $t('QUERY')
        }}</el-button>
      </div>
      <div class="flex-auto mb-10">
        <el-button v-if="permission.export" type="primary" @click="exportExcel">{{
          $t('EXPORT')
        }}</el-button>
      </div>
    </div>
    <TableView
      :table-header="tableHeader"
      :table-data="tableData"
      :page-data="pageData"
      @operate="operate"
      @pageChange="pageChange"
    />
    <edit :visible="editShow" :row-data="rowData" @close="close" />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import aoccConfigApi from '@/api/afs/AoccConfigApi'
  import { getParentsById } from '@/utils/common'
  import RegionCascader from '@/components/RegionCascader'
  import Edit from './Edit.vue'
  import { exportExcel } from '@/utils/jsonToExcel'
  import TableView from '@/components/TableView'
  let searchData = {} // 查询参数 只有点了查询有效
  export default {
    components: {
      RegionCascader,
      TableView,
      Edit
    },
    data() {
      return {
        pageData: {
          page: 1,
          size: 20,
          total: 0
        },
        queryData: {
          regionIds: [],
          keyword: ''
        },
        editShow: false,
        tableData: [],
        rowData: {},
        tableHeader: [
          {
            label: 'BELONGS_REGION_STATION_NAME',
            prop: 'stationName'
          },
          {
            label: 'BELONGS_ROOM_NAME',
            prop: 'roomName',
            width: 200,
            configType: 'extend'
          },
          {
            label: 'DEVICE_NAME',
            prop: 'deviceName',
            configType: 'default'
          },
          {
            label: 'DEVICE_CODE',
            prop: 'deviceId'
          },
          {
            label: 'PROTECT_POWER_THRESHOLD',
            prop: 'aoccStatusDataDto.protectPowerThs',
            width: 180
          },
          {
            label: 'PROTECT_VOLTAGE_THRESHOLD',
            width: 90,
            prop: 'aoccStatusDataDto.protectPowerVoltageThs'
          },
          {
            label: 'ENTER_LOW_POWER',
            width: 90,
            prop: 'aoccStatusDataDto.lowPowerTimeThs'
          }
        ]
      }
    },
    computed: {
      ...mapGetters(['dictMap', 'allNodeTypes', 'stationTree']),
      permission() {
        return this.$store.getters.getAuthData('conf:deviceThreshold')
      }
    },
    activated() {
      this.loadData()
    },
    methods: {
      loadData() {
        this.tableData = []
        const queryData = {
          ...searchData,
          page: this.pageData.page,
          size: this.pageData.size
        }
        aoccConfigApi.aoccThresholdPage(queryData).then(res => {
          this.tableData = res.list || []
          this.tableData.forEach(i => {
            i.stationName = this.getRegionName(i.regionId)
            i.btns = [{
              key: 'view',
              show: true,
              label: 'VIEW'
            }]
          })
          this.pageData.total = res.total
        })
      },
      operate(data) {
        switch (data.type) {
        case 'view':
          this.rowData = data.data
          this.editShow = true
          break
        }
      },
      // 获取设备类型
      getDeviceTypeName(deviceType) {
        return this.dictMap.NODE_TYPE ? this.dictMap.NODE_TYPE[deviceType] : ''
      },
      // 获取区域/站点
      getRegionName(regionId) {
        const parents = getParentsById(this.stationTree, regionId, 'regionId') || []
        return parents
          .reverse()
          .map(i => i.regionName)
          .join('/')
      },
      // 区域搜索条件改变
      regionChange(data) {
        this.queryData.regionIds = data
      },
      // 关键字搜索
      search() {
        this.pageData.page = 1
        searchData = {
          ...this.queryData
        }
        searchData.keyword = searchData.keyword === '' ? null : searchData.keyword
        this.loadData()
      },
      // 弹窗关闭
      close(load) {
        this.editShow = false
        if (load === true) {
          this.loadData()
        }
      },
      pageChange(data) {
        this.pageData = data
        this.loadData()
      },
      exportExcel(data) {
        const jsonExcel = []
        const relates = this.tableData.map((i, index) => {
          return {
            [this.$t('SEQUENCE')]: index + 1,
            [this.$t('BELONGS_STATION_NAME')]: i.stationName,
            [this.$t('DEVICE_NAME')]: i.deviceName,
            [this.$t('DEVICE_CODE')]: i.deviceId,
            [this.$t('PROTECT_POWER_THRESHOLD')]: i.aoccStatusDataDto.protectPowerThs,
            [this.$t('PROTECT_VOLTAGE_THRESHOLD')]: i.aoccStatusDataDto.protectPowerVoltageThs,
            [this.$t('ENTER_LOW_POWER')]: i.aoccStatusDataDto.lowPowerTimeThs
          }
        })
        jsonExcel.push(relates)
        exportExcel(jsonExcel, this.$t('MENU_DEVICE_THRESHOLD'), [])
      }
    }
  }
</script>

<style></style>
